<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org" >

  <head>
    <title> Spring 기반 게시판 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all" href="../../css/bbs.css" th:href="@{/css/bbs.css}"/> 
    
    <style>
		input[type="text"]:disabled {
			background: white ;/**/
			color: black;
			border: 1px solid black;
		}
		
		textarea:disabled {
			background: white ;/**/
			border: 1px solid black;
			color: black;
		} 
		
	</style>
    
    <script>
    
    	function setAllBtnEnabled( b ) {
    		b = ! b;
    		
    		document.getElementById( "editBtn" ).disabled = b; 
    		document.getElementById( "cancelBtn" ).disabled = b; 
    		document.getElementById( "saveBtn" ).disabled = b; 
    		document.getElementById( "deleteBtn" ).disabled = b; 
    		
    		document.getElementById( "paperName" ).disabled = b; 
    		document.getElementById( "paperContent" ).disabled = b;  
    		 
    	}
    	
    	function setBtnEnabled( btnId ) {
    		document.getElementById( btnId ).disabled = false ; 
    	}
    
    	function onClickEditBtn() {
    		// 편집 버튼 리스너
    		
    		setAllBtnEnabled( false );
    		
    		setBtnEnabled( "saveBtn" );
    		setBtnEnabled( "cancelBtn" ); 
    		
    		setBtnEnabled( "paperContent" ); 
    		setBtnEnabled( "paperName" ); 
    		
    		return false;
    	}
    	
    	function onClickCancelBtn() {
    		// 취소 버튼 리스너
    		
    		setAllBtnEnabled( false );
    		setBtnEnabled( "editBtn" );
    		setBtnEnabled( "deleteBtn" );
    		
    		return false;
    	}
    	
    	function onClickSaveBtn() {
    		// 저장 버튼 리스너
    		return true;
    	}
    	
    	function onClickDeleteBtn() {
    		// 삭제 버튼 리스너 
    		return true;
    	}
    	
    	function bodyOnLoad() {
    		// 문서 로딩 후, 처음으로 호출되는 함수.
    		var f = document.getElementById( "paperId" );
    		var paperId = f.value;
    		
    		if( paperId == '' ) {
    			// 새 글 작성시
    			onClickEditBtn();
    		} else {  
    			onClickCancelBtn();
    		}
    	}
    	
    </script>
  </head>

  <body onload="bodyOnLoad();"> 
    <div th:include="bbs_header.html::bbs_header"></div>
      
    <div> 
		<h2>
			<a href="#" th:href="@{ bbsBoardList.con( prevBoardId=${ BOARD_ID } ) }"> 게시판 </a>
			&nbsp;::⇒&nbsp;
			<a href="#" th:href="@{ bbsBoardView.con( boardId=${ BOARD_ID } ) }">
				<span th:text="${ board.BOARD_NAME }"> 게시판 이름 </span>
			</a>
			&nbsp;::⇒&nbsp;
			<a href="#" th:href="@{ bbsPaperView.con( boardId=${ BOARD_ID }, paperId=${ paper.PAPER_ID } ) }">
				<span th:text="${ paper.PAPER_NAME}"> 문서이름 </span>
			</a> 
		</h2>

		<form action="bbsPaperView.con" method="POST">
			<input type="hidden" name="boardId" 	value="" th:value="${ BOARD_ID }"/>
			<input type="hidden" name="paperId" 	value="" th:value="${ paper.PAPER_ID }"/>
			<input type="hidden" name="newPaper" 	value="" th:value="${ newPaper }"/>
    
        <fieldset> 
          <legend>문서 조회</legend>

          <ul class="errorlist">
            <li th:text="${ svrMsg }">메시지</li>
			<li th:if="${ errMsg != null }" th:text="${ errMsg }">에러</li>
          </ul> 

		  <table class="paperEditor" >
				<thead>
					<tr>
						<th> </th>
						<th> </th>
						<th> </th>
						<th> </th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="td_Label_Right">번호</td>
						<td>
							<span class="textSpan" th:text="${ paperRno }" >번호</span>  
						</td>
						<td class="td_Label_Right">아이디</td>
						<td>
							<span class="textSpan" th:text="${ paper.PAPER_ID }" >아이디</span> 
						</td>
					</tr>
					<tr>
						<td class="td_Label_Right">제목</td>
						<td><input type="text" id="paperName" name="paperName" th:value="${ paper.PAPER_NAME }" value="" style="width: 60%;"/>
						</td>
						<td class="td_Label_Right">작성자</td>
						<td>
							<span class="textSpan" th:text="${ paper.PAPER_USER_NAME }" >작성자</span>  
						</td>
					</tr>
					<tr>
						<td class="td_Label_Right">수정일</td>
						<td>
							<span class="textSpan" th:text="${ paper.PAPER_UPD_DATE }" >수정일</span> 
						</td>
						<td class="td_Label_Right">작성일</td>
						<td>
							<span class="textSpan" th:text="${ paper.PAPER_CRE_DATE }" >작성일</span> 
						</td>
					</tr>
					<tr style="height: 20px;">
						<td colspan="4"> <hr/>
						</td>
					</tr>
					<tr>
						<td  class="td_Label_Right" style="vertical-align: top;">본문</td>
						<td colspan="3" style="padding-right: 16px;">
							<textarea id="paperContent" name="paperContent" style="width:100%; height: 300px;" 
									th:inline="text" 
							>[[${ paper.PAPER_CONTENT }]]</textarea>
						</td> 
					</tr>
					<tr style=" height: 4px; ">
						<td colspan="4"> 
						</td>
					</tr>
					<tr>
						<td colspan="4" style="text-align: center;">
							<input type="hidden" id="paperRno" 	name="paperRno" th:value="${ paperRno }" 		value="" />
							<input type="hidden" id="paperId" 	name="" 		th:value="${ paper.PAPER_ID }" 	value="" />
							<button 				id="editBtn" 	name="editBtn" 		onclick="return onClickEditBtn() 					;" >편집</button> 
							<button 				id="cancelBtn" 	name="cancelBtn" 	onclick="return onClickCancelBtn() 					;" >취소</button> 
							<button type="submit"	id="saveBtn" 	name="saveBtn" 		onclick="this.value=1; return onClickSaveBtn()		;" >저장</button> 
							<button type="submit"	id="deleteBtn" 	name="deleteBtn" 	onclick="this.value=1; return onclickDeleteBtn()	;" >삭제</button>
						</td>
					</tr>
					<tr style=" height: 10px; ">
						<td colspan="4"> 
						</td>
					</tr>
				</tbody>
				<tfoot>
				</tfoot>
		  </table> 
        
        </fieldset>
          
      </form>
        
    </div> 
    
    <br/>
    <div th:include="bbs_footer.html::bbs_footer"></div>

  </body>
</html>